<template>
    <div>
        <el-button @click.prevent="addBig">添加分组</el-button>
        <el-form :model="paramsData" ref="paramsData" label-width="100px">
            <el-form-item
                v-for="(domain,index) in paramsData.domains"
                :key="index"
                :lable="'规格参数:'+index"
                :prop="'domains.'+index+'.value'"
                :rules="{required: true, message: 'value不能为空', trigger: 'blur'}"
            >
                <el-input v-model="domain.value" style="width: 60%;margin-right:10px;"/>
                <el-button @click.prevent="addJieshao(index)">添加规格参数</el-button>
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                <div
                    v-for="(ele,index1) in paramsData.domains[index].children"
                    :key="index1"
                    :lable="'规格参数:'+index1"
                    :prop="'item.'+index1+'.value'"
                    :rules="{required: true, message: 'value不能为空', trigger: 'blur'}"
                >
                    <el-input v-model="ele.value" style="width: 60%;margin-right:10px;"/>
                    <el-button @click.prevent="removeChild(index,ele)">删除</el-button>

                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('paramsData')">提交</el-button>
                <el-button @click="resetForm('paramsData')">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    export default {
        name: "ParamsAdd",
        data(){
            return{
                paramsData:{
                    domains:[
                        {
                            value:'',
                            children:[]
                        }
                    ]

                }
            }
        },
        methods:{
            // 添加分组
            addBig(){
                this.paramsData.domains.push({
                    value:'',
                    children:[
                        {
                            value:'',
                            childValue:''
                        }
                    ]
                })

            },
            // 添加规格参数
            addJieshao(index){
                this.paramsData.domains[index].children.push({
                    value:'',
                    children:[
                        {
                            value:'',
                            childValue:''
                        }
                    ]
                })

            },
            // 删除规格参数
            removeDomain(data){
                var index = this.paramsData.domains.indexOf(data);
                if (index !== -1){
                    this.paramsData.domains.splice(index,1)
                }
            },
            // 删除小元素
            removeChild(index,ele){
                var idx = this.paramsData.domains[index].children.indexOf(ele);
                if (idx !== -1){
                this.paramsData.domains[index].children.splice(index,1)
                }
            },
            // 提交
            submitForm(formName){
                // console.log(formName);
                this.$refs[formName].validate(valid=>{
                    if (valid){
                        this.$emit('onParamsAdd',JSON.stringify(this.paramsData.domains));
                    }else {
                        console.log('错误的提交');
                        return false;
                    }

                })

            },
            // 重置
            reactForm(formName){
                this.$refs[formName].resetField();
            }

        }
    }
</script>

<style scoped>

</style>